<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>淘宝选女友</title>
  <style>
    * {
      margin: 0;
      padding: 0
    }

    ul,
    ol {
      list-style: none
    }

    h3 {
      height: 40px
    }

    button:disabled {
      cursor: not-allowed;
    }

    .shopping {
      width: 570px;
      margin: 100px auto;
      padding: 20px;
      border: 1px solid #ccc;
      position: relative;
      overflow: hidden;
    }

    .shopping .left {
      float: left;
    }

    .shopping .right {
      float: right;
    }

    .shopping .girlImg {
      position: relative;
      width: 200px;
      height: 200px;
      cursor: move
    }

    .shopping .girlImg img {
      width: 100%;
      height: 100%
    }

    .shopping .girlImg span {
      display: none;
      width: 100px;
      height: 100px;
      position: absolute;
      background: rgba(255, 255, 0, 0.3);
      left: 0;
      top: 0;
    }

    .imgList {
      width: 220px;
      margin-top: 20px;
    }

    .imgList li {
      float: left;
      margin-right: 8px;
      border: 2px solid transparent
    }

    .imgList .ac {
      border: 2px solid red
    }

    .imgList li img {
      width: 40px;
      display: block
    }

    .price {
      height: 50px;
      font-size: 30px;
      color: red;
      font-weight: bold
    }

    .priceList {
      overflow: hidden;
      margin: 20px 0
    }

    .priceList li {
      float: left;
      height: 30px;
      line-height: 30px;
      padding: 0 10px;
      border: 2px solid #999;
      margin-right: 10px;
      cursor: pointer
    }

    .priceList .ac {
      border: 2px solid red
    }

    .changeNum {
      position: relative;
      margin: 20px 0
    }

    .changeNum input {
      width: 40px;
      height: 41px;
      text-align: center;
      line-height: 40px;
      border: 1px solid #ccc;
    }

    .changeNum button {
      height: 22px;
      width: 20px;
      background: none;
      border: 1px solid #ccc;
      position: absolute;
    }

    .changeNum .addBtn {
      left: 41px;
      top: 0px;
    }

    .changeNum .subBtn {
      left: 41px;
      top: 21px;
    }

    .okBtn {
      height: 30px;
      width: 100px
    }

    .bigBox {
      position: absolute;
      width: 200px;
      height: 200px;
      left: 230px;
      display: none;
      overflow: hidden;
    }

    .bigBox img {
      position: absolute;
    }

    .shopCart {
      position: fixed;
      right: 0;
      top: 200px;
      color: red;
    }

    .shopNum {
      width: 60px;
      height: 25px;
      background: deeppink;
      color: black;
      text-align: center;
      line-height: 25px;
    }

    .active {
      width: 25px;
      height: 25px;
      background: skyblue;
      position: absolute;
    }
  </style>
</head>

<body>
  <div class="shopping" id="shopping">
    <div class="left">
      <div class="girlImg" id="box">
        <img id="girl" src="4.jpeg">
        <span></span>
      </div>
      <ol id="imgList" class="imgList">
        <li><img src="0.jpg"></li>
        <li><img src="1.jpg"></li>
        <li><img src="2.jpg"></li>
        <li><img src="3.jpg"></li>
      </ol>
    </div>
    <div class="right">
      <h3>淘宝选女友---不要998,女友带回家!!</h3>
      <div id="price" class="price"><em>480-99988</em> 元</div>
      <ul id="priceList" class="priceList">
        <li>标准版</li>
        <li>升级版</li>
        <li>豪华版</li>
        <li>定制版</li>
      </ul>
      <div id="changeNum" class="changeNum">
        <input type="text" value="1">
        <button class="addBtn" type="button">+</button>
        <button class="subBtn" type="button" disabled>-</button>
      </div>
      <button id="okBtn" class="okBtn" type="button" disabled>加入购物车</button>
    </div>
    <div id="bigBox" class="bigBox"><img src="4.jpeg" alt=""></div>
  </div>
  <div id="shopCart" class="shopCart">
    购物车
    <p id="shopNum" class="shopNum">0</p>
  </div>
  <script>
    class Find {
      constructor() {
        // 找到所有元素
        this.shopping = document.querySelector('.shopping')
        this.box = document.querySelector('#box')
        this.girlImg = document.querySelector('.girlImg')
        this.span = document.querySelector('.shopping .girlImg span')
        this.imgList = document.querySelector('.imgList')
        this.imgs = document.querySelectorAll('#imgList li')
        this.price = document.querySelector('#price')
        this.priceWrap = document.querySelector('#price').querySelector('em')
        this.priceNum = [499, 699, 888, 999]
        this.btns = document.querySelectorAll('#priceList li')
        this.input = document.querySelector('input')
        this.addBtn = document.querySelector('.addBtn')
        this.subBtn = document.querySelector('.subBtn')
        this.okBtn = document.querySelector('.okBtn')
        this.bigBox = document.querySelector('.bigBox')
        this.girl = document.querySelector('#girl')
        this.bigBoximg = document.querySelector('.bigBox img')
        this.shopCart = document.querySelector('.shopCart')
        this.shopNum = document.querySelector('.shopNum')
        this.num = Number(this.input.value)
        // 放大镜效果 Zoom
        this.Zoom()
        // 选项卡效果 Tab
        this.Tab()
        // 加减效果   Sum
        this.Sum()
        // 购物车效果 Shop 
        this.Shop()
      }
      Zoom() {
        // 鼠标移入box span和大盒子显示
        this.box.onmouseenter = (() => {
          this.Toggle('block')
        })
        // 鼠标移出box sapan和大盒子隐藏
        this.box.onmouseleave = () => {
          this.Toggle('none')
        }
        // 通过鼠标移动，获取坐标，控制盒子移动
        this.span.onmousemove = (e) => {
          this.move(e)
        }
      }
      Tab() {
        // 鼠标点击遍历图片，获取当前图片和下标。
        Array.from(this.btns).forEach((btn, index) => {
          btn.onclick = () => {
            this.toggleGirl(index)
          }
        })
        // 鼠标移入遍历图片，获取当前图片和下标。
        Array.from(this.imgs).forEach((img, index) => {
          img.onmouseenter = () => {
            this.toggleGirl(index)
          }
        })
      }
      Sum() {
        var num = this.input.value
        this.addBtn.onclick = () => {
          this.num++
          this.subBtn.disabled = false
          if (this.num > 4) {
            this.addBtn.disabled = true
            alert('注意身体')
            this.num = 4
          }
          this.input.value = this.num
        }
        this.subBtn.onclick = () => {
          this.addBtn.disabled = false
          this.num--
          console.log(this.num)
          if (this.num < 1) {
            this.subBtn.disabled = true
            console.log(this.num)
            alert('真的不买吗')
            this.num = 0
          }
          this.input.value = this.num
        }
      }
      Shop() {
        this.okBtn.onclick = e => {
          // 获取三个点坐标
          var x1 = e.clientX,
            y1 = e.clientY,
            x2 = this.shopCart.offsetLeft,
            y2 = this.shopCart.offsetTop,
            x3 = x2 - 200,
            y3 = y2 - 100
          // 根据数学公式计算抛物线三个系数（这里不用管，拿来用就行）
          var a = -((y2 - y3) * x1 - (x2 - x3) * y1 + x2 * y3 - x3 * y2) / ((x2 - x3) * (x1 - x2) * (x1 - x3));
          var b = ((y2 - y3) * x1 * x1 + x2 * x2 * y3 - x3 * x3 * y2 - (x2 * x2 - x3 * x3) * y1) / ((x2 - x3) * (x1 - x2) * (x1 - x3));
          var c = ((x2 * y3 - x3 * y2) * x1 * x1 - (x2 * x2 * y3 - x3 * x3 * y2) * x1 + (x2 * x2 * x3 - x2 * x3 * x3) * y1) / ((x2 - x3) * (x1 - x2) * (x1 - x3));
          // 每次点击动态创建一个div
          var div = document.createElement('div')
          div.classList.add('active')
          document.body.appendChild(div)
          div.style.left = x1 + 'px'
          div.style.top = y1 + 'px'
          // 添加一个定时器，每30ms，坐标位移一次
          var timer = setInterval(() => {
            x1 += 10
            y1 = a * x1 * x1 + b * x1 + c
            div.style.left = x1 + 'px'
            div.style.top = y1 + 'px'
            // 判断终点
            if (x1 >= x2) {
              clearInterval(timer)
              div.remove('active')
              this.shopNum.innerHTML = parseInt(this.shopNum.innerHTML) + this.num
            }
          }, 30)
        }
      }
      // 重复执行的代码封装一个方法
      Toggle(display) {
        this.span.style.display = display
        this.bigBox.style.display = display
      }
      move(e) {
        // 计算坐标
        var left = e.pageX - this.shopping.offsetLeft - this.box.offsetLeft - this.span.offsetWidth / 2
        var top = e.pageY - this.shopping.offsetTop - this.box.offsetTop - this.span.offsetHeight / 2
        // 限定范围
        if (left < 0) left = 0
        if (top < 0) top = 0
        if (left > this.box.offsetWidth - this.span.offsetWidth)
          left = this.box.offsetWidth - this.span.offsetWidth
        if (top > this.box.offsetHeight - this.span.offsetHeight)
          top = this.box.offsetHeight - this.span.offsetHeight
        this.span.style.left = left + 'px'
        this.span.style.top = top + 'px'
        // 大图片的坐标是span的-2倍
        this.bigBoximg.style.left = -2 * left + 'px'
        this.bigBoximg.style.top = -2 * top + 'px'
      }
      toggleGirl(index) {
        // 点击或者移入恢复okBtn disabled属性
        this.okBtn.disabled = false
        // 循环移除所有带ac属性的元素
        for (var i = 0; i < this.imgs.length; i++) {
          this.imgs[i].classList.remove('ac')
          this.btns[i].classList.remove('ac')
        }
        // 给当前点击或者移入的添加ac属性
        this.imgs[index].classList.add('ac')
        this.btns[index].classList.add('ac')
        // 同时切换价格
        this.priceWrap.innerHTML = this.priceNum[index]
        // 给box和bigbox图片修改属性
        this.girl.src = `${index}.jpg`
        this.bigBoximg.src = `${index}.jpg`
      }
    }
    new Find()
  </script>
</body>

</html>